<template>
    <div class="account">
        <el-row :gutter="24">
            <el-col :span="6">
                <div class="header-view">
                    <div class="group-title">店铺抽成级数设置</div>
                    <el-button type="primary" size="mini" @click="addStoreShareConfig">新增层级</el-button>
                </div>
                <el-table :data="storeShareConfigs" border style="margin-bottom: 48px" :height="maxTabelHeight">
                    <el-table-column label="层级" align="center" prop="hierarchy" width="80" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column label="层级说明" align="left" prop="name" width="300" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column label="抽成比例" align="center" prop="dividendRatio" width="90"
                        :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            {{ scope.row.dividendRatio * 100 }} %
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="80" fixed="right">
                        <template slot-scope="scope">
                            <el-button-group>
                                <el-button type="text" icon="el-icon-edit"
                                    @click="editStoreShareConfig(scope.row)"></el-button>
                                <el-button type="text" v-if="maxStoreHierarchy === scope.row.hierarchy"
                                    icon="el-icon-delete" @click="deleteShareConfig(scope.row)"></el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="header-view">
                    <div class="group-title">个人返佣层级设置</div>
                    <el-button type="primary" size="mini" @click="addUserShareConfig">新增层级</el-button>
                </div>

                <el-table :data="userShareConfigs" border :height="maxTabelHeight">
                    <el-table-column label="层级" align="center" prop="hierarchy" width="80" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column label="层级说明" align="left" prop="name" width="300" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column label="分佣比例" align="center" prop="dividendRatio" width="90"
                        :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            {{ scope.row.dividendRatio * 100 }} %
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="80" fixed="right">
                        <template slot-scope="scope">
                            <el-button-group>
                                <el-button type="text" icon="el-icon-edit"
                                    @click="editUserShareConfig(scope.row)"></el-button>
                                <el-button type="text" v-if="maxUserHierarchy === scope.row.hierarchy" icon="el-icon-delete"
                                    @click="deleteShareConfig(scope.row)"></el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="18" class="mini-btn">
                <div class="header-view">
                    <div class="group-title table-title">店铺等级</div>
                    <el-button type="primary" size="mini" @click="addStoreLevel">新增层级</el-button>
                </div>
                <!-- <div class="group-title table-title">
                    <span>店铺等级</span>
                    <el-button type="primary" size="mini"
                        @click="addStore">新增</el-button>
                    </div> -->
                <el-table v-loading="loadingStore" :data="storeLevelList" style="margin-bottom: 48px" border
                    :height="maxTabelHeight">
                    <el-table-column label="小店等级" align="center" prop="id" min-width="120" :show-overflow-tooltip="true" />
                    <el-table-column label="等级名" align="center" prop="name" min-width="120" :show-overflow-tooltip="true" />
                    <el-table-column label="等级图标" align="center" prop="icon" min-width="120" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <oss-image-preview :model="'text'" :src="scope.row.icon" />
                        </template>
                    </el-table-column>
                    <el-table-column label="升级条件" align="center" prop="upgradeConditionNum" min-width="120"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="佣金比例" align="center" prop="ratio" min-width="120"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="最低收益比例" align="center" prop="minIncomeRatio" min-width="160"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="收益比例" align="center" prop="incomeRatio" min-width="120"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="等级" align="center" prop="level" min-width="80" :show-overflow-tooltip="true" />
                    <!-- <el-table-column label="下级Id" align="center" prop="nextLevel" /> -->
                    <el-table-column label="保证金" align="center" prop="earnestMoney" min-width="120"
                        :show-overflow-tooltip="true" :formatter="formatterEarnestMoney"/>
                    <el-table-column label="先款后货" align="center" prop="cashBeforeDelivery" min-width="120"
                        :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.cashBeforeDelivery" active-color="#13ce66"
                                inactive-color="#ff4949" :active-value="1" :inactive-value="2"
                                @change="storeLevelStatusChange(scope.row)" />
                        </template>
                    </el-table-column>
                    <el-table-column label="先货后款" align="center" prop="deliveryBeforeCash" min-width="120"
                        :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.deliveryBeforeCash" active-color="#13ce66"
                                inactive-color="#ff4949" :active-value="1" :inactive-value="2"
                                @change="storeLevelStatusChange(scope.row)" />
                        </template></el-table-column>
                    <el-table-column label="操作" align="center" fixed="right" width="200">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-edit"
                                @click="updateStore(scope.row)">修改</el-button>
                            <el-button size="mini" type="text" icon="el-icon-delete" v-if="scope.row.id == maxStoreLevel"
                                @click="deleteStore(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="header-view">
                    <div class="group-title table-title">用户等级</div>
                    <!-- <div class="group-title">个人返佣层级设置</div> -->
                    <el-button type="primary" size="mini" @click="adduserLevel">新增层级</el-button>
                </div>
                <!-- <div class="group-title table-title">用户等级</div> -->
                <el-table v-loading="loadingUser" :data="userLevelList" :height="maxTabelHeight">
                    <el-table-column label="用户等级" align="center" prop="level" min-width="120" :show-overflow-tooltip="true" />
                    <!-- <el-table-column label="用户等级" align="center" prop="id" min-width="120" :show-overflow-tooltip="true" /> -->
                    <el-table-column label="等级名" align="center" prop="name" min-width="120" :show-overflow-tooltip="true" />
                    <el-table-column label="等级图标" align="center" prop="icon" min-width="120" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <oss-image-preview :model="'text'" :src="scope.row.icon" />
                        </template></el-table-column>
                    <el-table-column label="升级条件" align="center" prop="upgradeConditionNum" min-width="120"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="是否允许上传短视频" align="center" prop="upShortVideoFlag" min-width="120"
                        :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.upShortVideoFlag" active-color="#13ce66" inactive-color="#ff4949"
                                :active-value="1" :inactive-value="2" @change="userLevelStatusChange(scope.row)" />
                        </template>
                    </el-table-column>
                    <el-table-column label="是否允许开店" align="center" prop="openShopFlag" min-width="120"
                        :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.openShopFlag" active-color="#13ce66" inactive-color="#ff4949"
                                :active-value="1" :inactive-value="2" @change="userLevelStatusChange(scope.row)" />
                        </template>
                    </el-table-column>
                    <el-table-column label="是否允许线上理财" align="center" prop="onlineFinancialFlag" min-width="120"
                        :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.onlineFinancialFlag" active-color="#13ce66"
                                inactive-color="#ff4949" :active-value="1" :inactive-value="2"
                                @change="userLevelStatusChange(scope.row)" />
                        </template>
                    </el-table-column>
                    <el-table-column label="是否允许线下理财" align="center" prop="offlineFinancialFlag" min-width="120"
                        :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.offlineFinancialFlag" active-color="#13ce66"
                                inactive-color="#ff4949" :active-value="1" :inactive-value="2"
                                @change="userLevelStatusChange(scope.row)" />
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="每周完成线下理财数量" align="center" prop="completeOnlineFinancialNum" min-width="120"
                        :show-overflow-tooltip="true" /> -->
                    <el-table-column label="保持金额" align="center" prop="keepAmount" min-width="120"
                        :show-overflow-tooltip="true" :formatter="formatterKeepAmount"/>
                    <el-table-column label="父级Id" align="center" prop="parentLevel" min-width="120"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
                        width="200">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-edit" @click="updateUserLevel(scope.row)"
                                v-hasPermi="['car:level:edit']">修改</el-button>
                            <el-button v-if="scope.row.id == maxUserLevel" size="mini" type="text" icon="el-icon-delete"
                                @click="deleteUserLevel(scope.row)" v-hasPermi="['car:level:remove']">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>



        <!-- 编辑层级 -->
        <el-dialog :title="storeShareEditTitle" :visible.sync="storeShareOpen" width="600px" :close-on-click-modal="false">
            <el-form :model="storeShareForm" ref="storeShareForm" label-position="right" :inline="true" label-width="160"
                :rules="storeShareFormRules">
                <el-form-item label="层级名字" prop="name">
                    <el-input v-model="storeShareForm.name" style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item prop="dividendRatio">
                    <span slot="label">
                        <el-tooltip content="最大值为1, 输入0.01表示1%" placement="top">
                            <i class="el-icon-question"></i>
                        </el-tooltip>
                        抽成比例
                    </span>

                    <el-input-number v-model="storeShareForm.dividendRatio" :precision="2" :step="0.01" :min="0" :max="1"
                        style="width: 400px"></el-input-number>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveStoreConfig">
                        确定
                    </el-button>
                    <!-- <el-button @click="storeShareOpen = false"> -->
                    <el-button @click="closeDialog('storeShareForm', 'storeShareOpen')">
                        取消
                    </el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 编辑层级 -->
        <el-dialog :title="userShareEditTitle" :visible.sync="userShareOpen" width="600px" :close-on-click-modal="false">
            <el-form :model="userShareForm" ref="userShareForm" label-position="right" label-width="160"
                :rules="userShareFormRules">
                <el-form-item label="层级名字" prop="name">
                    <el-input v-model="userShareForm.name" style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item prop="dividendRatio">
                    <span slot="label">
                        <el-tooltip content="最大值为1, 输入0.01表示1%" placement="top">
                            <i class="el-icon-question"></i>
                        </el-tooltip>
                        分佣比例
                    </span>
                    <el-input-number v-model="userShareForm.dividendRatio" :precision="2" :step="0.01" :min="0" :max="1"
                        style="width: 400px"></el-input-number>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveUserConfig">
                        确定
                    </el-button>
                    <!-- <el-button @click="userShareOpen = false">取消</el-button> -->
                    <el-button @click="closeDialog('userShareForm', 'userShareOpen')">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 添加或修改店铺等级对话框 -->
        <el-dialog :title="titleStore" :visible.sync="openStore" width="1000px" append-to-body>
            <el-form ref="storeForm" :model="storeForm" :rules="storeRules" label-width="110px" label-position="left">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="等级名" prop="name">
                            <el-input class="modal-input" v-model="storeForm.name" placeholder="请输入等级名" />
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item label="等级" prop="level">
                            <el-input class="modal-input" v-model="storeForm.level" placeholder="请输入等级" />
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item label="保证金" prop="earnestMoney">
                            <el-input type="number" step="1" class="modal-input" v-model="storeForm.earnestMoney" placeholder="请输入保证金" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="佣金比例" prop="ratio">
                            <el-input type="number" :step="0.01" :min="0" :max="1" class="modal-input" v-model="storeForm.ratio" placeholder="请输入佣金比例" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="最低收益比例" prop="minIncomeRatio">
                            <el-input type="number" :step="0.01" :min="0" :max="1" class="modal-input" v-model="storeForm.minIncomeRatio" placeholder="请输入最低收益比例" />
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="收益比例" prop="incomeRatio">
                            <el-input type="number" :step="0.01" :min="0" :max="1" class="modal-input" v-model="storeForm.incomeRatio" placeholder="请输入收益比例" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="升级条件" prop="upgradeConditionNum">
                            <el-input type="number" class="modal-input" v-model="storeForm.upgradeConditionNum"
                                placeholder="请输入升级条件" />
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row>

                    <el-col :span="12">
                        <el-form-item label="下级" prop="nextLevel">
                            <!-- <el-input class="modal-input" v-model="storeForm.nextLevel" placeholder="请输入下级Id" /> -->
                            <el-select v-model="storeForm.nextLevel" class="modal-input">
                                <el-option v-for="(item, index) in storeLevelList" :key="index" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row>
                    <el-form-item label="等级图标" prop="icon">
                        <!-- <el-input v-model="storeForm.icon" placeholder="请输入等级图标" /> -->
                        <ImageUpload :limit="1" v-model="storeForm.icon"></ImageUpload>
                    </el-form-item>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitStoreForm">确 定</el-button>
                <el-button @click="cancelStoreForm">取 消</el-button>
            </div>
        </el-dialog>

        <!-- 添加或修改用户等级对话框 -->
        <el-dialog :title="titleUser" :visible.sync="openUser" width="700px" append-to-body>
            <el-form ref="userForm" :model="userForm" :rules="userRules" label-width="100px" label-position="left">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="等级名" prop="name">
                            <el-input class="modal-input-mini" v-model="userForm.name" placeholder="请输入等级名" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="等级" prop="level">
                            <el-input class="modal-input-mini" v-model="userForm.level" placeholder="请输入等级" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="升级条件" prop="upgradeConditionNum">
                            <el-input type="number" class="modal-input-mini" v-model="userForm.upgradeConditionNum"
                                placeholder="请输入升级条件" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12"><el-form-item label="保持金额" prop="keepAmount">
                            <el-input type="number" class="modal-input-mini" v-model="userForm.keepAmount" placeholder="请输入保持金额" />
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item label="每周完成线下理财数量" prop="completeOnlineFinancialNum">
                            <el-input class="modal-input-mini" v-model="userForm.completeOnlineFinancialNum"
                                placeholder="请输入每周完成线下理财数量" />
                        </el-form-item>
                    </el-col> -->

                </el-row>
                <el-row>

                    <!-- <el-col :span="12"><el-form-item label="父级Id" prop="parentLevel">
                            <el-select v-model="userForm.parentLevel" class="modal-input-mini">
                                <el-option v-for="(item, index) in userLevelList" :key="index" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col> -->
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="等级图标" prop="icon">
                            <!-- <el-input class="modal-input-mini" v-model="userForm.icon" placeholder="请输入等级图标" /> -->
                            <ImageUpload :limit="1" v-model="userForm.icon"></ImageUpload>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitUserLevelForm">确 定</el-button>
                <el-button @click="cancelUserLevel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { configList, addShareConfig, updateConfig, delConfig, storeLevelList, updateStoreLevel, addStoreLevel, storeLevelDetails, userLevelList, userLevelUpdate, userLevelAdd, deleteUserLevel } from "@/api/setting/gradeRebate";
import OssImagePreview from "@/components/ImagePreview/oss-image-preview.vue";
//   import { getToken } from "@/utils/auth";
//   import { getUploadUrl, getBaseUrl } from "@/utils/uploadUrl";

export default {
    name: "Index",
    components: { OssImagePreview },
    data() {
        return {
            maxTabelHeight: '',
            //图片上传地址
            // uploadUrl: getUploadUrl(),
            //图片域名
            // baseUrl: getBaseUrl(),
            headerObj: {
                //   Authorization: getToken(),
            },
            // 遮罩层
            loading: true,
            // 用户表格数据
            dataList: null,
            // 总条数
            // total: 0,
            // 排序
            orderType: true,
            storeShareConfigs: [],
            storeShareForm: {},
            storeShareOpen: false,
            storeShareEditTitle: "",
            storeShareFormRules: {
                name: [
                    {
                        required: true,
                        message: "请输入层级名称",
                        trigger: "change,blur",
                    },
                ],
                dividendRatio: [
                    {
                        required: true,
                        message: "请输入抽成比例",
                        trigger: "change,blur",
                    },
                ],
            },

            userShareConfigs: [],
            userShareForm: {},
            userShareOpen: false,
            userShareEditTitle: "",
            userShareFormRules: {
                name: [
                    {
                        required: true,
                        message: "请输入层级名称",
                        trigger: "change,blur",
                    },
                ],
                dividendRatio: [
                    {
                        required: true,
                        message: "请输入返佣比例",
                        trigger: "change,blur",
                    },
                ],
            },
            //商铺等级列表
            storeLevelList: [],
            openStore: false,
            titleStore: '',
            // 表单参数
            storeForm: {

            },
            // 表单校验
            storeRules: {
                name: { required: true, message: '请输入店铺等级名称', trigger: 'blur' },
                icon: { required: true, message: '请上传店铺等级图标', trigger: 'blur' },
                upgradeConditionNum: { required: true, message: '请输入升级条件', trigger: 'blur' },
                ratio: [{ required: true, message: '请输入佣金比例', trigger: 'blur' },{ pattern: /^1|0|[0]{1}[.]{1}[0]*[1-9]+[0-9]*$/, message:"佣金比例范围0-1", trigger: ['blur', 'change'] }],
                minIncomeRatio: [{ required: true, message: '请输入最低收益比例', trigger: 'blur' },{ pattern: /^1|0|[0]{1}[.]{1}[0]*[1-9]+[0-9]*$/, message:"最低收益比例范围0-1", trigger: ['blur', 'change'] }],
                incomeRatio: [{ required: true, message: '请输入收益比例', trigger: 'blur' },{ pattern: /^1|0|[0]{1}[.]{1}[0]*[1-9]+[0-9]*$/, message:"收益比例范围0-1", trigger: ['blur', 'change'] }],
                // level: { required: true, message: '请输入等级', trigger: 'blur' },
                nextLevel: { required: true, message: '请选择下级ID', trigger: ['blur', 'change']},
                earnestMoney: [{ required: true, message: '请输入保证金', trigger: 'blur' }],
            },
            //用户
            loadingUser: false,
            userLevelList: [],
            titleUser: '',
            openUser: false,
            userForm: {},
            userRules: {
                name: { required: true, message: '请输入用户等级名称', trigger: 'blur' },
                level: { required: true, message: '请输入用户等级', trigger: 'blur' },
                upgradeConditionNum: { required: true, message: '请输入用户升级条件', trigger: 'blur' },
                completeOnlineFinancialNum: { required: true, message: '请输入每周完成线下理财数量', trigger: 'blur' },
                keepAmount: { required: true, message: '请输入保证金', trigger: 'blur' },
                // parentLevel: { required: true, message: '请选择父级Id', trigger: 'blur' },
                icon: { required: true, message: '请上传用户等级图标', trigger: 'blur' },
            },
            maxStoreLevel: 0,
            maxUserLevel: 0
        };
    },
    created() {
        //   // type 0代表店铺抽成 1代表个人分佣
        this.calcTabelHeight()
        this.getShareConfig(0);
        this.getShareConfig(1);
        this.getStoreList();
        this.getUserLevelList();
    },
    computed: {
        maxStoreHierarchy() {
            let hierarchy = 0;
            for (let item of this.storeShareConfigs) {
                if (item.type === 0) {
                    if (item.hierarchy >= hierarchy) {
                        hierarchy = item.hierarchy;
                    }
                }
            }
            return hierarchy;
        },
        maxUserHierarchy() {
            let hierarchy = 0;
            for (let item of this.userShareConfigs) {
                if (item.type === 1) {
                    if (item.hierarchy >= hierarchy) {
                        hierarchy = item.hierarchy;
                    }
                }
            }
            return hierarchy;
        },
    },
    methods: {
        //计算页面单个table高度
        calcTabelHeight() {
            window.bodyHeight = document.documentElement.clienHeight || document.body.clientHeight;
            this.maxTabelHeight = (window.bodyHeight - 300) / 2;
        },
        getShareConfig(type) {
            configList(type).then((res) => {
                if (type == "0") {
                    this.storeShareConfigs = res.data || [];
                } else {
                    this.userShareConfigs = res.data || [];
                }
            });
        },
        addStoreShareConfig() {
            this.storeShareOpen = true;
            this.storeShareEditTitle = "新增抽成层级";
            this.storeShareForm = {};
        },
        editStoreShareConfig(row) {
            this.storeShareEditTitle = "修改抽成百分比";
            this.storeShareForm = Object.assign({}, row);
            this.storeShareOpen = true;
        },
        saveStoreConfig() {
            this.$refs["storeShareForm"].validate((valid) => {
                if (valid) {
                    if (this.storeShareForm.id) {
                        //如果是总分红不校验
                        const total =
                            this.totalDividendRatio(this.storeShareForm.hierarchy, "0") +
                            this.storeShareForm.dividendRatio;
                        if (total > 1) {
                            this.$message({
                                type: "error",
                                message: this.$t('configuration.percentageMax'),
                            });
                            return;
                        }

                        updateConfig(this.storeShareForm).then((res) => {
                            this.$message({ type: "success", message: this.$t('configuration.updateSuccess') });
                            this.getShareConfig(0);
                            this.resetStoreConfigForm();
                        });
                    } else {
                        // 新增
                        const total =
                            this.totalDividendRatio(null, "0") +
                            this.storeShareForm.dividendRatio;
                        if (total > 1) {
                            this.$message({
                                type: "error",
                                message: this.$t('configuration.percentageMax'),
                            });
                            return;
                        }
                        this.storeShareForm.hierarchy = this.maxStoreHierarchy + 1;
                        this.storeShareForm.type = 0;
                        addShareConfig(this.storeShareForm).then((res) => {
                            this.$message({ type: "success", message: this.$t('configuration.addSuccess') });
                            this.getShareConfig(0);
                            this.resetStoreConfigForm();
                        });
                    }
                }
            });
        },
        resetStoreConfigForm() {
            this.storeShareOpen = false;
            this.storeShareForm = {};
            this.$refs["storeShareForm"].resetFields();
        },

        addUserShareConfig() {
            this.userShareOpen = true;
            this.userShareEditTitle = "新增分佣层级";
            this.userShareForm = {};
        },
        editUserShareConfig(row) {
            this.userShareEditTitle = "修改分佣百分比";
            this.userShareForm = Object.assign({}, row);
            this.userShareOpen = true;
        },
        saveUserConfig() {
            this.$refs["userShareForm"].validate((valid) => {
                if (valid) {
                    if (this.userShareForm.id) {
                        // 修改
                        if (this.userShareForm.id != -1) {
                            //如果是总分红不校验
                            const total =
                                this.totalDividendRatio(this.userShareForm.hierarchy, "1") +
                                this.userShareForm.dividendRatio;
                            if (total > 1) {
                                this.$message({
                                    type: "error",
                                    message: "分佣百分比总和不能大于100%",
                                });
                                return;
                            }
                        }

                        updateConfig(this.userShareForm).then((res) => {
                            this.$message({ type: "success", message: "修改成功！" });
                            this.getShareConfig(1);
                            this.resetUserConfigForm();
                        });
                    } else {
                        // 新增
                        const total =
                            this.totalDividendRatio("1") + this.userShareForm.dividendRatio;
                        if (total > 1) {
                            this.$message({
                                type: "error",
                                message: "分佣百分比总和不能大于100%",
                            });
                            return;
                        }
                        this.userShareForm.hierarchy = this.maxUserHierarchy + 1;
                        this.userShareForm.type = 1;
                        addShareConfig(this.userShareForm).then((res) => {
                            this.$message({ type: "success", message: "添加成功！" });
                            this.getShareConfig(1);
                            this.resetUserConfigForm();
                        });
                    }
                }
            });
        },
        resetUserConfigForm() {
            this.userShareOpen = false;
            this.userShareForm = {};
            this.$refs["userShareForm"].resetFields();
            this.$refs["userShareForm"].clearValidate();
        },
        deleteShareConfig(row) {
            this.$modal
                .confirm("确认删除" + row.hierarchy + "的数据项？")
                .then(function () {
                    return delConfig(row.id);
                })
                .then(() => {
                    this.getShareConfig(row.type);
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => { });
        },

        totalDividendRatio(hierarchy, type) {
            if (type == "0") {
                let total = 0;
                for (let item of this.storeShareConfigs) {
                    if (hierarchy && hierarchy === item.hierarchy) {
                        continue;
                    }
                    total += item.dividendRatio;
                }
                return total;
            } else {
                let total = 0;
                for (let item of this.userShareConfigs) {
                    if (hierarchy && hierarchy === item.hierarchy) {
                        continue;
                    }
                    total += item.dividendRatio;
                }
                return total;
            }
        },
        clearForm() {
            this.$refs.formPop.resetFields()
            this.$refs.formPop.clearValidate();
        },

        closeDialog(form, open) {
            this.$refs[form].resetFields();
            this.$refs[form].clearValidate();
            this[open] = false;
        },
        //   店铺部分
        /** 查询店铺等级列表 */
        getStoreList() {
            this.loadingStore = true;
            storeLevelList().then(response => {
                this.storeLevelList = response.data;
                this.maxStoreLevel = Math.max(...this.storeLevelList.map(i => i.id));
                this.loadingStore = false;
            });
        },
        // 取消按钮
        cancelStoreForm() {
            this.openStore = false;
            this.resetStoreForm();
        },
        // 表单重置
        resetStoreForm() {
            this.storeForm = {
                id: null,
                name: null,
                icon: null,
                upgradeConditionNum: null,
                ratio: null,
                minIncomeRatio: null,
                incomeRatio: null,
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null,
                level: null,
                nextLevel: null,
                earnestMoney: null,
                cashBeforeDelivery: null,
                deliveryBeforeCash: null
            };
            this.resetForm("storeForm");
        },
        /** 新增按钮操作 */
        addStoreLevel() {
            this.resetStoreForm();
            this.openStore = true;
            this.titleStore = "添加店铺等级";
        },
        /** 修改按钮操作 */
        updateStore(row) {
            this.resetStoreForm();
            const id = row.id || this.ids
            this.openStore = true;
            this.storeForm = row;
            this.titleStore = "修改店铺等级";
            // storeLevelDetails(id).then(response => {
            //     this.storeForm = response.data;
            //     this.openStore = true;
            //     this.titleStore = "修改店铺等级";
            // });
        },
        /** 删除按钮操作 */
        deleteStore(row) {
            // storeLevelDetails(id).then(response => {
            //     this.storeForm = response.data;
            //     this.openStore = true;
            //     this.titleStore = "修改店铺等级";
            // });
            this.$modal
                .confirm("确认删除" + row.name + "的数据项？")
                .then(function () {
                    return storeLevelDetails(row.id);
                })
                .then(() => {
                    this.getStoreList();
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => { });
        },
        /** 提交按钮 */
        submitStoreForm() {
            this.$refs["storeForm"].validate(valid => {
                if (valid) {
                    if (this.storeForm.id != null) {
                        updateStoreLevel(this.storeForm).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.openStore = false;
                            this.getStoreList();
                        });
                    } else {
                        addStoreLevel(this.storeForm).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.openStore = false;
                            this.getStoreList();
                        });
                    }
                }
            });
        },
        // 状态修改
        storeLevelStatusChange(row) {
            updateStoreLevel(row).then(res => {
                if (res.success) {
                    this.getStoreList();
                    this.$message.success(res.msg);
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        //用户等级相关
        //获取用户等级列表
        getUserLevelList() {
            this.loadingUser = true;
            userLevelList(this.queryParams).then(response => {
                this.userLevelList = response.data;
                this.maxUserLevel = Math.max(...this.userLevelList.map(i => i.id))
                this.loadingUser = false;
            });
        },
        // 取消按钮
        cancelUserLevel() {
            this.openUser = false;
            // this.resetUserLevel();
            this.$refs['userForm'].resetFields();
            this.$refs['userForm'].clearValidate();
        },
        // 表单重置
        resetUserLevel() {
            this.userForm = {
                id: null,
                name: null,
                icon: null,
                upgradeConditionNum: null,
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null,
                upShortVideoFlag: null,
                openShopFlag: null,
                onlineFinancialFlag: null,
                offlineFinancialFlag: null,
                completeOnlineFinancialNum: null,
                keepAmount: null,
                level: null,
                nextLevel: null
            };
            this.resetForm("resetUserLevel");
        },/** 新增按钮操作 */
        adduserLevel() {
            this.resetUserLevel();
            this.openUser = true;
            this.titleUser = "添加用户等级";
        },
        /** 修改按钮操作 */
        updateUserLevel(row) {
            this.resetUserLevel();
            const id = row.id || this.ids
            let currentData = row;
            this.userForm = currentData;
            this.openUser = true;
            this.titleUser = "修改用户等级";
        },
        /** 删除按钮操作 */
        deleteUserLevel(row) {
            this.$modal
                .confirm("确认删除" + row.name + "的数据项？")
                .then(function () {
                    return deleteUserLevel(row.id);
                })
                .then(() => {
                    this.getUserLevelList();
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => { });
        },
        /** 提交按钮 */
        submitUserLevelForm() {
            this.$refs["userForm"].validate(valid => {
                if (valid) {
                    if (this.userForm.id != null) {
                        userLevelUpdate(this.userForm).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.openUser = false;
                            this.getUserLevelList();
                        });
                    } else {
                        userLevelAdd(this.userForm).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.openUser = false;
                            this.getUserLevelList();
                        });
                    }
                }
            });
        },
        // 状态修改
        userLevelStatusChange(row) {
            userLevelUpdate(row).then(res => {
                if (res.success) {
                    this.getUserLevelList();
                    this.$message.success(res.msg);
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        formatterEarnestMoney:function(row){
            return this.$yun.priceFormatter(row.earnestMoney);
        },
        formatterKeepAmount:function(row){
            return this.$yun.priceFormatter(row.keepAmount);
        },
    },
};
</script>

<style lang="scss" scoped>
.account {
    padding: 10px;
}

.header-view {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 50px;

}

.group-title {
    font-size: 18px;
    font-weight: 700;
    color: #333333;
}

.el-table {
    width: auto !important;
}

.table-title {
    height: 44px;
    line-height: 44px;
}
</style>
